<template>
    <div class="right-box-bottom">
        <!-- <button @click="prevPage" :disabled="currentPage <= 1">上一页</button> -->
        <button class="btn_red_empty" :class="{ active: page === currentPage }" v-for="(page) in props.pageCount"
            :key="page" @click="goToPage(page)">
            {{ page }}
        </button>
        <!-- <button @click="nextPage" :disabled="currentPage >= pageCount">下一页</button> -->
        <!-- <div class="bottom-x btn_red_empty">2</div>
                    <div class="bottom-x btn_red_empty">3</div> -->
    </div>
</template>

<script setup>

import { defineProps } from 'vue'
import { defineEmits } from 'vue';



let emit = defineEmits(['pagination'])
let goToPage = (page) => {
    emit('pagination',page)
}


let props = defineProps({
    pageCount: Number,
    currentPage:Number
})
</script>

<style scoped>
.right-box-bottom {
    display: flex;
    margin-left: 5px;
    position: absolute;
    bottom: 60px;
    left: 20px;

    .active {
        background-color: #EC535B;
        color: #ffffff;
    }

    button {
        width: 32px;
        height: 32px;
        margin: 10px;
        cursor: pointer;
        border-radius: 6px;
    }
}
</style>